<template>
	<view>
		<view class="newJoinMemberModal">
			<navBar v-if="isShowCustomNavBar" :navbarData.sync="navbarData"></navBar>
			<loading :showLoaded.sync="showLoaded"></loading>
			<view class="content">
				<view class="title"> 加入会员享专属权益 </view>
				<image class="model-icon"
					src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/registerbgcimg/@2xDividers.png"
					mode="widthFix"></image>
				<view class="icon-list">
					<view class="icon-item" v-for="(item, index) in iconList" :key="index">
						<image :src="item.url" mode="widthFix"></image>
						<view class="icon-text">{{ item.text }}</view>
					</view>
				</view>
				<view class="btn-btm">
					<button class="bind" open-type="getPhoneNumber"
						@getphonenumber="onGetPhoneNumber($event, 'binding')">
						我已注册会员，立即绑定
					</button>
					<button class="isregistry" open-type="getPhoneNumber"
						@getphonenumber="onGetPhoneNumber($event, 'register')">
						立即注册
					</button>
				</view>



				<register-widget ref="registerWidgetRef" location="home" @finish="onRegisterWidgetFinish"
					:tsActId="tsActId" :entrance="false" @registerSuccess="registerSuccess" :isActive="isActive" />
				<view v-for="(item, index) in alertList" :key="index">
					<view class="new-eb-member-modal" v-if="item.isShow">
						<image @click="onClose"
							src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/member_close.png"
							class="top-close" mode="widthFix" />
						<image class="model-icon"
							src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/member_icon.png"
							mode="widthFix"></image>
						<view class="content">
							<view class="message" :class="item.btnText == '立即入会' ? 'text-padding' : ''">{{ item.text }}
							</view>
							<view class="btn-wrap">
								<button class="common-btn solid btn" @click.stop="onClose()"
									v-if="item.btnText === '关闭'">
									关闭
								</button>
								<button class="common-btn solid btn" @click.stop="onJoinNow" v-else>
									立即入会
								</button>
								<button class="common-btn btn" open-type="getPhoneNumber"
									@getphonenumber="onGetPhoneNumber($event)">
									重新授权
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import registerWidget from "@/components/register/register-widget.vue";
	import registerController from "@/components/register/RegisterController.js";
	import loading from "@/components/common/loading";
	import NavBar from "@/components/common/navbar";
	import api from "@/api/api";
	import tip from "@/utils/tip";
	import {
		SYSTEM_INFO,
		SEL_CLASS_CODE,
		SEL_ACTIVE_CODE,
		MERCHANT_INFO,
		CUSTOMER_INFO,
		CART_KEY,
		LOWER_WX_VERSION,
	} from "@/utils/constant";
	import {
		getUnionByPhone
	} from "@/components/register/utils.js";
	export default {
		components: {
			registerWidget,
			navBar: NavBar,
			loading: loading,
		},
		data() {
			return {
				showLoaded: true,
				userInfo: {
					mobile: "", //手机号
					isActive: "", //1 会员 0 新用户
					type: "",
				},
				isShowCustomNavBar: true,
				// 组件所需的参数
				navbarData: {
					showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
					title: "", //导航栏 中间的标题
					newLogo: uni.getStorageInfoSync("storeLogo"),
					isTopFixed: true,
					leftIcon: "https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/search.png",
				},
				tsActId: "",
				iconList: [{
						url: "https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/registerbgcimg/Image@2x.png",
						text: "专享购买",
					},
					{
						url: "https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/registerbgcimg/Image@2x (1).png",
						text: "专属福利",
					},
					{
						url: "https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/registerbgcimg/Image@2x (2).png",
						text: "品牌特邀",
					},
					{
						url: "https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/registerbgcimg/Image@2x (3).png",
						text: "新品通知",
					},
				],
				alertList: [{
						isShowId: "isFAIL_NOT_MEMBER",
						isShow: false,
						text: "该微信账号已绑定其他手机号码，请以相应手机号码重新授权，或更换未经注册的微信账号重新登录后入会。如需帮助，请联系客服。",
						btnText: "关闭",
						GetPhoneBtn: "重新授权",
					},
					{
						isShowId: "isFAIL_NO_ID",
						isShow: false,
						text: "该微信账号已绑定其他手机号码，请以相应手机号码重新授权，或更换微信账号重新登录后绑定。如需换绑，请联系客服。",
						btnText: "关闭",
						GetPhoneBtn: "重新授权",
					},
					{
						isShowId: "isOldFAIL_NOT_MEMBER",
						isShow: false,
						text: "查询到您授权的手机号尚未注册过会员，请重新授权手机号码进行绑定，或使用当前手机号码注册新会员，如需帮助，请联系客服。",
						btnText: "立即入会",
						GetPhoneBtn: "重新授权",
					},
					{
						isShowId: "phoneNumberState",
						isShow: false,
						text: "抱歉，当前仅支持中国大陆手机号。请更换手机号后重新授权，完成会员注册。",
						btnText: "关闭",
						GetPhoneBtn: "重新授权",
					},
				],
			};
		},
		async onShow() {
			await this.$refs.registerWidgetRef.init();
			await this.getUseInfo();
			if (this.userInfo.isActive) {
				this.$store.commit(
					"changeregisterAgreeToContinueIsActive",
					!!this.userInfo.isActive
				);
			}
			setTimeout(() => {
				this.showLoaded = false;
			}, 2000);
		},
		async onLoad(options = {}) {
			try {
				const userInfo = {}
				const {
					staffId,
					storeId,
					staffName,
					storeName
				} = options
				if (staffId || storeId || staffName || storeName) {
					userInfo.c_clienteling_staff_id = staffId
					userInfo.c_clienteling_store_id = storeId
					userInfo.c_clienteling_staff_name = staffName
					userInfo.c_clienteling_store_name = storeName
					this.setExpiringStorage('registerParams', userInfo)
				}
			} catch (e) {

			}
		},
		methods: {
			onShareAppMessage() {
				return this.getShareOptions();
			},
			onShareTimeline() {
				return this.getShareOptions();
			},
			getShareOptions() {
				return {
					title: '点击探索匠心传承和品牌故事',
					query: 'pages/customer/scanCode',
					imageUrl: 'https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg',
				};
			},
			setExpiringStorage(key, value) {
				const now = new Date().getTime();
				const expireTime = now + 48 * 60 * 60 * 1000; // 48小时后过期
				uni.setStorage({
					key: key,
					data: {
						value: value,
						expireTime: expireTime
					},
					success: function() {}
				});
			},

			textPadding() {
				return "padding-left: 20rpx; padding-right: 20rpx;";
			},
			onJoinNow() {
				this.onClose();
				uni.navigateTo({
					url: `/pages/customer/exclusiveRegister?phoneNumber=${this.phoneNumber}&isDialog=1&userClickState=${this.userInfo.type}&isActive=0`,
				});
			},
			async getUseInfo() {
				let that = this;
				let jwt = "";
				let customerInfo = uni.getStorageSync(CUSTOMER_INFO) || getApp().globalData.customerInfo;
				if (!!customerInfo) {
					that.userInfo.mobile = customerInfo.mobile
					jwt = customerInfo.jwt;
				}
				await that.getMemberDetail(jwt);
			},
			async onGetPhoneNumber(e, type) {
				this.onClose();
				uni.showLoading({
					title: "正在加载",
				});
				if (!!type) {
					this.userInfo.type = type;
				}
				let that = this;
				const app = getApp();
				const res = await registerController.getPhoneNumberData(e, {
					location: this.location,
				});
				// 验证手机
				if (res.success) {
					const {
						phoneNumber
					} = res.data;
					const phoneNumberReg = /^1\d{10}$/;
					if (!phoneNumberReg.test(phoneNumber)) {
						uni.hideLoading();
						this.openAlert("phoneNumberState");
						return;
					}
					this.phoneNumber = phoneNumber;
					const userInfo = await registerController.oldUserCheck(phoneNumber);

					//当前用户是老会员并且有union id 且手机号和授权手机号不一致
					// 用户以为自己是老会员实际上不是老会员
					if (
						userInfo.messageModalCode === "NONE" &&
						this.userInfo.type == "binding"
					) {
						uni.hideLoading();
						this.openAlert("isOldFAIL_NOT_MEMBER");
						return;
					} else if (userInfo.messageModalCode === "FAIL_NO_ID") {
						// console.log("授权的手机号是会员 并且手机号和授权的不一致");
						uni.hideLoading();
						this.openAlert("isFAIL_NO_ID");
						//  授权的手机号是会员 并且手机号和授权的不一致
						return;
					} else if (userInfo.messageModalCode === "FAIL_NOT_MEMBER") {
						//  授权的手机号不是会员 并且手机号和授权的不一致
						// console.log("授权的手机号不是会员 并且手机号和授权的不一致");
						uni.hideLoading();
						this.openAlert("isFAIL_NOT_MEMBER");
						return;
					}
					if (this.userInfo.isActive) {
						// 是会员
						uni.hideLoading();
						// 跳转注册页
						uni.navigateTo({
							url: `/pages/customer/exclusiveRegister?phoneNumber=${phoneNumber}&isDialog=1&userClickState=${this.userInfo.type}&isActive=1`,
						});
					} else {
						// 新用户
						uni.hideLoading();
						// 跳转注册页
						uni.navigateTo({
							url: `/pages/customer/exclusiveRegister?phoneNumber=${phoneNumber}&isDialog=0&userClickState=${this.userInfo.type}&isActive=0`,
						});
					}
				} else {
					uni.hideLoading();
				}
			},
			onClose() {
				this.alertList.forEach((i) => {
					i.isShow = false;
				});
			},

			openAlert(isShowId) {
				this.alertList.forEach((i) => {
					if (i.isShowId === isShowId) {
						i.isShow = true;
					}
				});
			},
			/**
			 * 判断是否是会员
			 *
			 * @param jwt
			 * @return {Promise<void>}
			 */
			getMemberDetail: async function(jwt) {
				let that = this;
				const memberDetailsResult = await api.getMemberDetails({
					header: {
						jwt: jwt,
					},
				});
				if (memberDetailsResult.code == 1000) {
					const phoneNumberReg = /^1\d{10}$/;
					if (!phoneNumberReg.test(memberDetailsResult.data.mobile)) {
						// 非大陆手机号按照非会员对待,重新入会
						uni.removeStorageSync('memberDetails');
						that.userInfo.mobile = "";
						that.userInfo.isActive = 0;
						return;
					}
					let memberDetails = memberDetailsResult.data;
					if (memberDetails.isActive == "Active") {
						that.userInfo.isActive = 1;
					} else {
						that.userInfo.isActive = 0;
					}
				}
			},
			onRegisterWidgetFinish() {},
			registerSuccess() {},
		},
	};
</script>
<style scoped lang="less">
	.newJoinMemberModal {
		height: 100vh;
		// background-image: url("https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/registerbgcimg/Rectangle 15771162@1x (8).png");
		background-image: url("https://100000063-1252208446.file.myqcloud.com/images/Rectangle 15771162@2x (1).png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		font-family: NotoSansSC-Regular;

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 200rpx;
		}

		.title {
			padding-top: 90rpx;
			font-size: 48rpx;
			font-weight: 500;
			font-family: "NotoSansSC-Medium";
			color: #ffffff;
			line-height: 72rpx;
		}

		.icon-list {
			padding-top: 68rpx;
			width: 622rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.icon-item {
				text-align: center;

				image {
					display: block;
					width: 96rpx;
					height: 96rpx;
				}

				.icon-text {
					padding-top: 16rpx;
					font-size: 24rpx;
					line-height: 20rpx;
					color: #fff;
					font-family: "NotoSansSC-Regular";
				}
			}
		}

		.bind {
			padding: 0;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 40rpx;
			color: #ffffff;
			font-family: "NotoSansSC-Regular";
			margin-bottom: 36rpx;
			border-bottom: 1px solid #fff;
			width: 264rpx;
		}

		.isregistry {
			width: 622rpx;
			height: 80rpx;
			border-radius: 48rpx 16rpx 48rpx 48rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-family: NotoSansSC-Regular;
			color: #ffffff;
			border: 2rpx solid #ffffff;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 36rpx;
			opacity: 1;
		}

		.model-icon {
			width: 182rpx;
			height: 57rpx;
			padding-top: 20rpx;
		}

		button,
		.btn,
		.btnStyle {
			background-color: transparent;
		}

		.new-eb-member-modal {
			font-family: NotoSansSC-Regular;
			width: 654rpx;
			height: 652rpx;
			background: #fff;
			position: relative;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.btn {
				width: 255rpx;
				height: 80rpx;
				border-radius: 48rpx 16rpx 48rpx 48rpx;
			}

			.common-btn {
				border: 4rpx solid #000000;
				color: #ffffff;
				background-color: #000000;
				font-size: 28rpx;
				font-weight: 500;
				font-family: NotoSansSC-Medium;
			}

			.solid {
				border: 4rpx solid #000000;
				background-color: #ffffff;
				color: #000000;
				margin-right: 16rpx;
			}

			.top-img {
				display: block;
				width: 100%;
			}

			.top-close {
				position: absolute;
				right: 24rpx;
				top: 24rpx;
				width: 64rpx;
				height: 64rpx;
			}

			.model-icon {
				width: 182rpx;
				height: 57rpx;
				padding-top: 128rpx;
				padding-left: 236.12rpx;
			}

			.content {
				padding-top: 20rpx;
				padding-bottom: 96rpx;
			}

			.message {
				font-size: 28rpx;
				line-height: 48rpx;
				padding: 0 64rpx;
				font-weight: 400;
				color: #757575;
				font-family: "NotoSansSC-Regular";
				text-align: center;
				margin-bottom: 80rpx;
			}

			.btn-wrap {
				margin-top: 32rpx;
				padding: 0 64rpx;
				display: flex;
				justify-content: space-between;
			}
		}
	}

	.text-padding {
		padding: 0 73rpx !important;
	}

	.btn-btm {
		position: absolute;
		left: 50%;
		bottom: 64rpx;
		transform: translate(-50%, 0);
	}
</style>